<template>
  <div class="bg_fff">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="俱乐部名称：">
        <el-input v-model="formInline.user" placeholder="俱乐部名称"></el-input>
      </el-form-item>
      <el-form-item label="俱乐部创建人：">
        <el-input v-model="formInline.name" placeholder="俱乐部创建人"></el-input>
      </el-form-item>
      <el-form-item label="创建日期：">
        <div class="block">
          <el-date-picker
            v-model="value"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="俱乐部状态：">
        <el-select v-model="formInline.region" placeholder="请选择俱乐部状态">
          <el-option label="全部" value="shanghai"></el-option>
          <el-option label="正常" value="beijing"></el-option>
          <el-option label="冻结" value="wuhan"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="p10">
      <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    </div>
    
    <div class="block p20 tac">
      <el-pagination
        :page-size="10"
        background
        layout="total, prev, pager, next, jumper"
        @current-change='handleCurrentChange'
        :total="400">
      </el-pagination>
    </div>
  </div>
  
</template>
<script>
export default {
  data() {
    return {
      formInline: {
        user: '',
        name: '',
        region:'',
      },
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value: '',
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],

    }
  },
  methods: {
    onSubmit() {
      console.log(new Date(this.value[0]))
      console.log('submit!');
    },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  }
};

</script>
<style lang='less' scoped>
  .demo-form-inline{
    text-align: left;
    padding: 5px;
  }
</style>